@charset "utf-8";

/* 正常形态头部样式 */
body{background: #fff url(/dlzrmzf/pc2025/images/public/header_bg.png) center top no-repeat; background-size: 1920px auto;}
.header, .header a{color: rgba(255, 255, 255, 1);}
.header-toolbar{line-height: 36px;padding-top: 18px;}
/* 含有href属性的a标签 */

.header-toolbar a[href]:hover{color: #ffffffd5;}
.header-toolbar li{position: relative;float: left;}
.header-toolbar-l li::after{content: '|';display: inline-block;padding: 0 16px;color:#fff}
.header-toolbar-l li:last-child::after{content: "";}
.header-toolbar-r li{margin-right: 12px;}
.header-toolbar-r li a{display:block;border: 1px solid rgba(255, 255, 255, 0.32);padding: 0 10px;border-radius: 999px;}
.header-toolbar-r li .icon{display: inline-block;vertical-align: middle;position: relative;height: 36px;width: 24px;}
.header-toolbar-r li .icon img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.header-toolbar-r li:last-child{margin-right: 0;}
.header-toolbar-r li:last-child a{background: linear-gradient(180deg, rgba(75, 154, 250, 1) 0%, rgba(39, 119, 217, 1) 100%);}
.header-toolbar-r li .wx{position:relative;cursor:pointer;}
.header-toolbar-r li .wx .wx-qrcode{max-height:0;overflow:hidden;position:absolute;top:190%;transition: all 0.2s;width:200px;z-index:99;left:50%;transform:translateX(-50%);cursor:pointer;}
.header-toolbar-r li .wx .wx-qrcode img{width:100%;height:200px;object-fit:fill;}
.header-toolbar-r li:hover .wx .wx-qrcode{max-height:300px;}
.header-toolbar-r li .wx .wx-qrcode.show{max-height:300px;}

.mainnav{margin-top: 30px;}
.mainnav{position: relative;z-index: 9;height: 80px;overflow: hidden;border-bottom: 1px solid rgba(255, 255, 255, 0.22);}
.mainnav li{float: left;position: relative;}
.mainnav li a{display:block; position: relative;padding: 0 42.4px; height: 100%; line-height: 80px; font-size: 20px; text-align:center; color: #fff; transition-property: background-color; transition-duration: .3s; position: relative; text-align: center; font-weight: bold;}
.mainnav li.on a{ background-color: rgba(255, 255, 255, 0.2);}
.mainnav li:not(.on) a:hover{background: rgba(255, 255, 255, 0.2);}
.header-logo{margin-top: 34px;}
.header-logo a{display: block;width: calc(555 / 1260 * 100%);margin: 0 auto;}
.header-logo a img{display: block;width: 100%;}
.header-search{margin-top: 26px;margin-bottom: 67px;}
.header-search .header-search-box{position: relative;margin: 0 auto;width: calc(638 / 1260 * 100%);height: 60px;background-color: rgba(255, 255, 255, 1);font-size: 0;overflow: hidden;border-radius: 8px;}
.header-search .header-search-box .header-search-icon{height: 100%;display: inline-block;width: 60px;vertical-align: top;}
.header-search .header-search-box .header-search-icon img{width: 100%;height: 100%;object-fit: none;}
.header-search .header-search-box input{width: calc(100% - 60px - 108px);height: 100%;border: none;outline: none;display: inline-block;vertical-align: top;font-size: 16px;color: #333;}
.header-search .header-search-box .header-search-btn{width: 108px;height: 100%;display: inline-block;vertical-align: top;line-height: 60px;font-size: 16px;font-weight: 700;color: #fff;background-color: rgba(35, 106, 194, 1);text-align: center;cursor: pointer;user-select: none;}
.header-search .header-search-box .header-search-btn::before{content: "搜一下";}
.header-search .header-search-box .header-search-btn:hover{background-color: rgb(36, 121, 225);}
.header-search .header-search-box .header-search-btn:active{font-size: 14px;}

/* 悬浮形态头部样式 */
.header-fixed{position: fixed;top: 0;left: 0;width: 100%;z-index: 9001;background: url(/dlzrmzf/pc2025/images/public/header_fixed_bg.png) center top no-repeat;}
.header-fixed .mainnav{margin: 0;border-bottom: none;}
.header-fixed .mainnav li.on a{background: none;}
.header-fixed .header-search{margin: 0;float: none;width: 100%;}
.header-fixed .header-search .header-search-box{width: 338px;background: none;padding: 16px 0;height: 50px;}
.header-fixed .header-search .header-search-icon{display: none;}
.header-fixed .header-search .header-search-txt{width: calc(100% - 16px);background: none;padding: 0 20px;color: #fff;}
.header-fixed .header-search .header-search-btn{width: 16px;height: 16px;background: transparent url(/dlzrmzf/pc2025/images/public/fixed_search_icon.png) center center no-repeat !important;}
.header-fixed .header-search .header-search-btn::before{display: none;}
.header-fixed .header-search .header-search-btn:hover{background: transparent url(/dlzrmzf/pc2025/images/public/fixed_search_icon.png) center center no-repeat;}
.header-fixed .header-search .header-search-btn:active{transform: scale(0.95);}

/* 移动端导航按钮 */
.header-mobile-btn{width: 26px;height: 20px;position: absolute;top: 27px;right: 15px; cursor: pointer;display: none;cursor: pointer;}
.header-mobile-btn.on{position:fixed;}
.header-mobile-btn span{display:block; width:15px; height:2px;position: absolute;top:50%;transform: translateY(-50%);  background:#fff; position:relative; vertical-align: middle; transition: all 0.3s;}
.header-mobile-btn:after,
.header-mobile-btn:before { content: ""; position: absolute; display: inline-block; width: 26px; height: 2px; left: 0;background-color: #fff; transition: all 0.3s;}
.header-mobile-btn:before {top: 0;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.header-mobile-btn:after {bottom: 0;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;transition-property: bottom,transform;}
.header-mobile-btn.on span {background-color: transparent;}
.header-mobile-btn.on span:after,.header-mobile-btn.on span:before {background: #fff;}
.header-mobile-btn.on span:before {top: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.header-mobile-btn.on span:after {bottom:0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.header-mobile-btn.active{position:fixed;right: 15px;top: 27px;z-index: 9999;}
.header-mobile-btn.active span {background-color: transparent;}
.header-mobile-btn.active:before {top: 50%; -webkit-transform: rotate(45deg) translateY(-50%);-moz-transform: rotate(45deg) translateY(-50%);-ms-transform: rotate(45deg) translateY(-50%);-o-transform: rotate(45deg) translateY(-50%);transform: rotate(45deg) translateY(-50%);}
.header-mobile-btn.active:after {bottom: 50%; -webkit-transform: rotate(-45deg) translateY(50%);-moz-transform: rotate(-45deg) translateY(50%);-ms-transform: rotate(-45deg) translateY(50%);-o-transform: rotate(-45deg) translateY(50%);transform: rotate(-45deg) translateY(50%);}

/** 动画 **/
.search-anim{-webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;}
.search-anim-upbit{-webkit-animation-name: search-upbit; animation-name: search-upbit;}
/* 微微往上滑入 */
@-webkit-keyframes search-upbit{
  from {-webkit-transform: translate3d(0, 15px, 0); opacity: 0.3;}
  to {-webkit-transform: translate3d(0, 0, 0);  opacity: 1;}
}
@keyframes search-upbit{
  from {transform: translate3d(0, 15px, 0);  opacity: 0.3;}
  to {transform: translate3d(0, 0, 0);  opacity: 1;}
}

/* 响应式布局 */
@media (max-width: 1500px) {
	.mainnav li a{padding: 0 38px;}
}

@media (max-width: 1280px) {
	.mainnav li a{padding: 0 24px;}
}


@media (max-width: 992px) {
  .mainnav li a{padding: 0 14px;font-size: 18px;}
  .header-search .header-search-box{width: 70%;}
}

@media (max-width: 768px) {
  .header .header-mobile-btn{display: block !important;}
  .header .header-fixed{display: none !important;}
  .header .header-toolbar-r{float: left;}
  .header .mainnav{position: fixed;width: 230px;height: 100vh;border-bottom: none; right: -230px;top: 0; z-index: 9000;margin-top: 0;padding-top: 60px;transition: all 0.3s;}
  .header .mainnav::before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(35, 106, 194, 1);z-index: 1;}
  .header .mainnav li{float: none;}
  .header .mainnav .container{height: 100%;z-index: 3;position: relative;top: 0;width: 100% !important;}
  .header .mainnav li a{line-height: 60px;}
  .header .mainnav.active{right: 0;}
  .header .mainnav.active::after{content: "";width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.5);z-index: -1;}
  .header, .header a{font-size: 14px;}
  .mobile-none{display: none;}
}

@media (max-width: 431px) {
  .header, .header a{font-size: 12px;}
  .header-toolbar{padding-top: 10px;line-height: 20px;}
  .header-toolbar-l li::after{padding: 0 5px;}
  .header .header-toolbar-r{margin-top: 10px;}
  .header .header-toolbar-r a{padding: 5px 10px;display: inline-block;}
  .header-toolbar-r li .icon{display: none;}
  .header-mobile-btn{top: 47px;}
  .header-logo{margin-top: 20px;}
  .header-logo a{width: 80%;}
  .header-search .header-search-box{width: 100%;}
  .header-search{margin-top: 20px;margin-bottom: 30px;}
  .header-search .header-search-box{height: 39px;}
  .header-search .header-search-box .header-search-icon{width: 50px;}
  .header-search .header-search-box .header-search-btn{line-height: 39px;font-size: 14px;width: 70px;}
  .header-search .header-search-box input{width: calc(100% - 120px);font-size: 14px;}
  .header .mainnav{padding-top: 100px;}
  .header-mobile-btn.active{right: 15px;top: 47px;}
}